import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { Icon, Modal, Form, Input, Select, DatePicker, Radio, Upload } from 'antd';
import Service from '@/public/http/services';
import style from './index.css';
const { TextArea } = Input;
const { Option } = Select;
const CreateModal: React.FC<any> = ({ formData, visible, title, onOK, onCancel, form, dispatch }) => {
    useEffect(() => {
        if (formData && Object.keys(formData).length) {
            setCurLogoFileList([{ uid: formData.id, url: formData.logoPic }] as any)
            setCurFileList([{ uid: formData.id, url: formData.coverPic }] as any)
        }
    }, [formData])
    const formItemLayout = {
        labelCol: { span: 5 },
        wrapperCol: { span: 14 },
    }

    const { getFieldDecorator } = form;

    const [loading, setLoading] = useState(false);

    const [curFileList, setCurFileList] = useState([]);
    const [curLogoFileList, setCurLogoFileList] = useState([]);

    const uploadSuccess = (file, fileObj) => {
        setLoading(false);
        const { uid, name } = fileObj;
        setCurLogoFileList([{
            uid,
            name,
            url: curFileUrl,
        }] as any);
    }

    const uploadSuccess2 = (file, fileObj) => {
        setLoading(false);
        const { uid, name } = fileObj;
        setCurFileList([{
            uid,
            name,
            url: curFileUrl2,
        }] as any);
    }

    const handleChange = (res) => {
        console.log(res)
    }

    const [curActionUrl, setCurActionUrl] = useState();
    const [curUploadData, setCurUploadData] = useState({});
    const [curFileUrl, setCurUrl] = useState('');
    const [curFileUrl2, setCurUrl2] = useState('');
    const beforeUpload = async (file, fileList) => {
        setLoading(true);
        const result = await Service.uploadFileDirect();
        const { host, policy, accessid, signature } = result;
        setCurActionUrl(host);
        const timetamp = new Date().getTime();
        const key = timetamp + '.' + file.name.split('.').pop()
        setCurUrl(host + '/' + key)
        setCurUploadData({
            key,
            policy,
            OSSAccessKeyId: accessid,
            success_action_status: '200',
            signature
        });
        return true;
    }
    const beforeUpload2 = async (file, fileList) => {
        setLoading(true);
        const result = await Service.uploadFileDirect();
        const { host, policy, accessid, signature } = result;
        setCurActionUrl(host);
        const timetamp = new Date().getTime();
        const key = timetamp + '.' + file.name.split('.').pop()
        setCurUrl2(host + '/' + key)
        setCurUploadData({
            key,
            policy,
            OSSAccessKeyId: accessid,
            success_action_status: '200',
            signature
        });
        return true;
    }

    const removeSuccess = () => {
        setCurLogoFileList([] as any);
    }
    const removeSuccess2 = () => {
        setCurFileList([] as any);
    }
    /**
     * @desc 文章插图上传配置
     */
    const upload: any = {
        name: 'file',
        action: curActionUrl,//上传接口，成功后返回该图片服务器地址
        listType: 'picture-card',
        headers: {
            authorization: 'authorization-text',
        },
        onRemove:removeSuccess,
        onSuccess:uploadSuccess,
        onChange: handleChange,
        beforeUpload: beforeUpload,
        data: curUploadData
    }
    const upload2: any = {
        name: 'file',
        action: curActionUrl,//上传接口，成功后返回该图片服务器地址
        listType: 'picture-card',
        headers: {
            authorization: 'authorization-text',
        },
        onRemove:removeSuccess2,
        onSuccess:uploadSuccess2,
        onChange: handleChange,
        beforeUpload: beforeUpload2,
        data: curUploadData
    }

    return (
        <Modal
            visible={visible}
            title={title}
            okText={'保存'}
            cancelText={'取消'}
            onOk={() => {
                setCurFileList([])
                setCurLogoFileList([])
                onOK && onOK(form, {
                    files: curFileList, logos: curLogoFileList
                })
            }}
            onCancel={() => {
                setCurFileList([])
                setCurLogoFileList([])
                onCancel(form)
            }}
            width={'65%'}
        >

            <Form.Item {...formItemLayout} label={'园所名称'}>
                {
                    getFieldDecorator('name', {
                        initialValue: formData.name,
                        rules: [{ required: true, message: '请输入园所名称' }],
                    })(<Input placeholder={'请输入园所名称'} />)
                }
            </Form.Item>
            <Form.Item {...formItemLayout} label={'LOGO'}>
                {
                    getFieldDecorator('logoPic', {
                        initialValue: curLogoFileList.length ? (curLogoFileList[0] as any).url : '',
                        rules: [{ required: true, message: '请上传LOGO' }],
                    })(<Upload
                        className={style['upload-btn']}
                        listType="picture-card"
                        {...upload}
                        fileList={curLogoFileList}
                    >
                        <div>
                            <Icon type={loading ? 'loading' : 'plus'} />
                            <div className="ant-upload-text">上传</div>
                        </div>
                    </Upload>)
                }
            </Form.Item>
            <Form.Item {...formItemLayout} label={'园所封面图'}>
                {
                    getFieldDecorator('coverPic', {
                        initialValue: curFileList.length ? (curFileList[0] as any).url : '',
                        rules: [{ required: true, message: '请上传园所封面' }],
                    })(<Upload
                        className={style['upload-btn']}
                        listType="picture-card"
                        {...upload2}
                        fileList={curFileList}
                    >
                        <div>
                            <Icon type={loading ? 'loading' : 'plus'} />
                            <div className="ant-upload-text">上传</div>
                        </div>
                    </Upload>)
                }
            </Form.Item>
            <Form.Item {...formItemLayout} label={'园所规模'}>
                {
                    getFieldDecorator('personnelScale', {
                        initialValue: formData.personnelScale,
                        rules: [{ required: true, message: '请选择园所规模' }],
                    })(<Select className={style.w220} placeholder={'请选择园所规模'}>
                        <Option value="50">50及以下</Option>
                        <Option value="100">100</Option>
                        <Option value="500">500</Option>
                        <Option value="1000">1000</Option>
                        <Option value="2000">2000</Option>
                    </Select>)
                }
            </Form.Item>
            <Form.Item {...formItemLayout} label={'董事长'}>
                {
                    getFieldDecorator('chargeUsername', {
                        initialValue: formData.chargeUsername,
                        rules: [{ required: true, message: '请输入董事长' }],
                    })(<Input placeholder={'请输入董事长'} />)
                }
            </Form.Item>
            <Form.Item {...formItemLayout} label={'手机号'}>
                {
                    getFieldDecorator('tel', {
                        initialValue: formData.tel,
                        rules: [{ required: true, message: '请输入手机号' }],
                    })(<Input placeholder={'请输入手机号'} />)
                }
            </Form.Item>
            <Form.Item {...formItemLayout} label={'备注'}>
                {
                    getFieldDecorator('remark', {
                        initialValue: formData.remark,
                    })(<TextArea placeholder={'备注'} />)
                }
            </Form.Item>
        </Modal>
    );
}
const WrappedCreateModal = Form.create<any>({ name: 'modalForm' })(CreateModal);
export default connect((state: any) => {
    return {}
})(WrappedCreateModal);
